<template>
  <div id="bgc">
    <div class="log">
      <div class="logo">
        <img
          src="https://likede2-admin.itheima.net/img/logo.595745bd.png"
          alt=""
        />
      </div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item class="ipt" prop="loginName">
          <el-input
            v-model="form.loginName"
            placeholder="请输入账号"
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <el-form-item class="ipt2" prop="password">
          <el-input
            v-model="form.password"
            :type="inputType"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          ></el-input>
          <span class="svg-container" @click="pwdChange">
            <svg-icon
              :icon-class="inputType === 'password' ? 'eye' : 'eye-open'"
            ></svg-icon>
          </span>
        </el-form-item>
        <el-form-item class="ipt3" prop="code">
          <el-input
            v-model="form.code"
            placeholder="请输入验证码"
            prefix-icon="el-icon-lock"
          ></el-input>
          <div class="pic" @click="getRandom">
            <img :src="imgUrl" alt="" />
          </div>
        </el-form-item>
        <el-button type="primary" @click="submit" :loading="loading"
          >登录</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
import request from "@/utils/request";
export default {
  name: "DikedePcIndex",

  data() {
    return {
      form: {
        loginName: "admin",
        password: "admin",
      },
      imgUrl: "",
      r: "",
      inputType: "password",
      rules: {
        loginName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      loading: false,
    };
  },

  created() {
    this.getRandom();
    this.getImg();
  },

  methods: {
    getRandom() {
      const r = parseInt(Math.random() * 11);
      this.r = r;
    },
    pwdChange() {
      this.inputType === "password"
        ? (this.inputType = "text")
        : (this.inputType = "password");
    },
    async getImg() {
      const res = await request({
        url: `/api/user-service/user/imageCode/${this.r}`,
        responseType: "arraybuffer",
      });
      const bufferUrl = btoa(
        new Uint8Array(res.data).reduce(
          (data, byte) => data + String.fromCharCode(byte),
          ""
        )
      );
      const imgUrl = "data:image/png;base64," + bufferUrl;
      this.imgUrl = imgUrl;
    },
    async submit() {
      try {
        this.loading = true;
        await this.$refs.form.validate();
        await this.$store.dispatch("user/loginAction", {
          loginName: this.form.loginName,
          password: this.form.password,
          code: this.form.code,
          clientToken: this.r,
          loginType: 0,
        });
        Message.success("登录成功");
        this.$router.push("/");
      } catch (err) {
        console.dir(err);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#bgc {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-image: url(https://likede2-admin.itheima.net/img/background.be4fae7d.png);
  background-repeat: no-repeat;
  background-size: cover;
  .log {
    position: absolute;
    width: 518px;
    height: 388px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 3px 70px 0 rgb(30 111 72 / 35%);
    border-radius: 10px;
    .logo {
      position: absolute;
      width: 96px;
      height: 96px;
      top: -46px;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 100%;
      }
    }
    .el-form {
      padding: 76px 35px 0;
      .el-form-item {
        position: relative;
        width: 446px;
        .el-input {
          ::v-deep .el-input__inner {
            // padding-left: 40px;
            height: 52px !important;
            ::v-deep .el-input__prefix {
              font-size: 16px;
            }
          }
        }
        .svg-container {
          position: absolute;
          top: 0;
          right: 0;
          padding: 6px 5px 6px 15px;
          color: #889aa4;
          vertical-align: middle;
          width: 30px;
          display: inline-block;
        }
        .pic {
          position: absolute;
          top: 0;
          right: 0;
          width: 130px;
          height: 50px;
          border-radius: 0 4px 4px 0;
          // background-color: red;
        }
      }
      .el-button {
        width: 446px;
        height: 52px;
      }
    }
  }
}
</style>
